<template>
  <div class="page-container">
    <div ref="income" class="container-charts"></div>
  </div>
</template>

<script>
import { plantingHarvest } from "../request/api";
export default {
  data() {
    return {};
  },
  mounted() {
    this.init();
    this.getData();
    this.screen();
    window.addEventListener("resize",this.screen)
  },
  destroyed() {
    window.removeEventListener("resize", this.screen);
  },
  methods: {
    init() {
      //调接口
      // let  result = await plantingHarvest()
      // console.log(result,"dfdsafafdsafdsa")

      // let xData = result.data.map((item)=>item.month)
      // let sData = result.data.map((item)=>item.harvest)
      // console.log(sData);
      //获取容器节点
      let income = this.$refs.income;
      // console.log(income)
      //初始化
      let myincome = this.$echart.init(income);
      this.info = myincome

      //初始化配置项
      let options = {
        //标题
        title: {
          text: "全国种植面积收成情况",
          left: 35,
          top: 0,
        },
        grid: {
          left: "15%",
          top: "18%",
          right: "10%",
          bottom: "10%",
        },
        //x轴
        xAxis: {
          type: "category",
        //   data: xData,
        },
        //y轴
        yAxis: {
          type: "value",
          axisLine: {
            //是否显示坐标轴轴线。
            //数据线
            show: true,
          },
          axisTick: {
            //是否显示坐标轴刻度。
            //刻度
            show: true,
          },
        },
        //数据列
        series: [
          {
            type: "bar",
            // data: sData,
            label: {
              show: true,
              position: "top",
            },
            itemStyle: {
              barBorderRadius: [80, 80, 0, 0],
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#5CC3E2",
                  },
                  { offset: 1, color: "#3F5E7B" 
                },
                ],
              },
            },
           emphasis:{
       itemStyle: {
                        color: '0F3357',   //hover时改变柱子颜色
                        // shadowColor: 'rgba(102,102,102,0.50)',
                        // shadowOffsetX: 0,
                        // shadowOffsetY: 2,
                        // shadowBlur: 6,
                     
                    }

    }
          },
        ],
        //提示框
        tooltip: {
          show: true,
        },
      };
      //设置配置项内容
      myincome.setOption(options);
    },
    //封装获取数据的接口
    async getData() {
      let result = await plantingHarvest();
      console.log(result, "dfdsafafdsafdsa");

      let xData = result.data.map((item) => item.month);
      let sData = result.data.map((item) => item.harvest);
      console.log(sData);
      this.setEchart(xData, sData);
    },
    //重新设置x轴和数据列的数据
    setEchart(xData,sData){
        let options={
            //x轴
        xAxis: {
          type: "category",
          data: xData,
        },
      series:[
        {
            type:'bar',
            data:sData
        }
      ]

        };
        this.info.setOption(options)
    },
    //数据图表自适应
    screen(){
        this.info.resize()
        let width = this.$refs.income.offsetWidth;
        // console.log(this.$refs.income.offsetWidth)
        let num = (width/100)*6;


        let options = {
            title:{
                textStyle:{
                    fontSize:num
                }
            }
        };

        this.info.setOption(options)
    }
   
    
  },
};
</script>

<style lang="" scoped>
</style>
